<!--  -->
<template>
  <div style="padding: 15px 30px">
    <!-- <el-dialog title="批量提审" width="50%" :visible.sync="m_Approve.vsb"> -->
    <template v-for="(item, i) in m_Approve.rows">
      <el-descriptions :key="i" class="margin-top" :title="Title(item)" :column="2" size="small">
        <el-descriptions-item label="广告位名称">{{ item.locationDesc }}</el-descriptions-item>
        <el-descriptions-item label="资产编码">{{ item.assetCode }}</el-descriptions-item>
        <el-descriptions-item label="广告位类型">{{ GetValBykey(m_adTypeList, item.adType) }}</el-descriptions-item>
        <el-descriptions-item label="媒体类型">{{ GetValBykey(m_mediaTypeList, item.mediaType) }}</el-descriptions-item>
        <el-descriptions-item label="广告位尺寸">{{ item.adSize }}</el-descriptions-item>
        <el-descriptions-item label="广告数量">{{ item.adNum }}</el-descriptions-item>
        <el-descriptions-item label="位置类型">{{ GetValBykey(m_locationTypeList, item.locationType) }}</el-descriptions-item>
        
        <el-descriptions-item label="位置描述">{{ item.locationCode }}</el-descriptions-item>
        <el-descriptions-item label="面向空间">{{ item.spaceAddress }}</el-descriptions-item>
        <el-descriptions-item label="广告位状态">{{ GetValBykey(m_adStatusList, item.adStatus) }} </el-descriptions-item>

        <el-descriptions-item label="广告位图片" 
            v-if="item.businessAttachmentParam && item.businessAttachmentParam.length && item.businessAttachmentParam[0].fileUrl">
          <el-image
            style="width: 160px; height: 100px"
            :src="item.businessAttachmentParam[0].fileUrl" 
            :preview-src-list="[item.businessAttachmentParam[0].fileUrl]">
          </el-image>
          <!-- <el-button type="text" @click="PictureClick(item)">点击查看</el-button> -->
        </el-descriptions-item>
      </el-descriptions>
      <el-divider :key="i"></el-divider>
    </template>
    <el-form label-width="120px" size="small" label-position="right">
      <el-form-item>
        <p slot="label" class="font-weight-600">理由：</p>
        <el-input maxlength="200" :disabled="!!$route.query.processWorkId" placeholder="请输入" v-model="m_Approve.form.remark" clearable></el-input>
      </el-form-item>
      <el-form-item v-if="!$route.query.processWorkId || fileList.length">
        <p slot="label" class="font-weight-600">上传文件：</p>
        <!-- <el-upload :disabled="$route.query.taskId" class="upload-demo" action accept="image/*" :http-request="event => beforeupload(event.file, item)">
          <el-button  type="primary" style="margin-right: 10px" plain size="mini">上传</el-button>
        </el-upload> -->
        <!-- <el-button type="primary" size="mini" plain @click="downPicture(item)">查看</el-button>  -->
        <uploadFile :isNewwindow="true" :disabled="!!$route.query.processWorkId" :is-multiple="false" filed-name="file" :max-size="20" accept-file-type=".xlsx,.xls,.csv,.png,.jpg,.Png,.Jpg" :file-list.sync="fileList" @handleRemove="handleRemove" @handleSuccess="handleSuccess">
          <template v-slot:info>
            <div slot="tip" class="margin-left-10">注：文件大小不能超过1G</div>
          </template>
        </uploadFile>
      </el-form-item>
    </el-form>

    <div class="t-right padding-top-15">
      <!-- <el-button @click="m_Approve.vsb = false" size="mini">取 消</el-button> -->
      <el-button v-if="!$route.query.processWorkId" type="primary" size="mini" @click="summitAudit()">提 审</el-button>
    </div>
    <ApproveInfo v-if="!!$route.query.processWorkId"></ApproveInfo>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
import dayjs from 'dayjs';
import ApproveInfo from '../approveInfo.vue';
import projectInfoApi from '../../../../api/projectInfo';
import uploadFile from '../../modules/upload.vue';
import { apifailAudit } from '../../../../api/common';
export default {
  components: { uploadFile,ApproveInfo },
  data() {
    return {
      fileList: [],
      m_adTypeList: [
        {
          value: 0,
          label: '发光标识',
        },
        {
          value: 1,
          label: '亚克力板',
        },
        {
          value: 2,
          label: '广告布',
        },
        {
          value: 3,
          label: '立地灯箱',
        },
        {
          value: 4,
          label: '外立面广告位',
        },
        {
          value: 5,
          label: '覆壁灯箱',
        },
        {
          value: 6,
          label: '灯箱',
        },
        {
          value: 7,
          label: '电梯轿厢广告',
        },
        {
          value: 8,
          label: '门头logo',
        },
      ],
      m_mediaTypeList: [
        {
          value: 0,
          label: '数字',
        },
        {
          value: 1,
          label: '框架',
        },
      ],
      m_locationTypeList: [
        {
          value: 0,
          label: '室内',
        },
        {
          value: 1,
          label: '室外',
        },
      ],
      m_adStatusList: [
        {
          value: 0,
          label: '可用',
        },
        {
          value: 1,
          label: '不可用',
        },
      ],
      //提审信息
      m_Approve: {
        IsAdd: true,
        vsb: false,
        form: { remark: null, businessAttachmentParam: null },
        rows: [],
      },
    };
  },
  filters: {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // m_Data: {
    //   immediate: false,
    //   deep: true,
    //   handler(val) {
    //   },
    // },
  },
  //接收参数
  props: {
    //m_Data: {
    //type: String,
    //default: '',
    //},
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.GetApprove({ workId: this.$route.query.workId,  dynamicList: [0,1,2] });
  },
  //方法集合
  methods: {
    handleSuccess(file, fileList) {
      if (file.data.rows && file.data.rows.length > 0) {
        this.fileList.push({
          key: file.data.rows[0].key,
          url: file.data.rows[0].url,
          name: file.data.rows[0].originalName,
        });
      } else {
        this.fileList = [];
        this.$message.error(file.data.message);
      }
    },
    handleRemove(file, fileList) {
      // debugger
      this.fileList.forEach((item, index) => {
        if (item.key == file.key) {
          this.fileList.splice(index, 1);
        }
      });
    },
    Title(item) {
      if (item.status == 2) return '已拆广告资源';
      if (item.dynamic) return '编辑广告资源';
      if (!item.dynamic) return '新增广告资源';
      return '';
    },
    GetValBykey(list, val) {
      let obj = list.find(obj => {
        return obj.value == val;
      });
      if (obj) return obj.label;
      return '-';
    },
    PictureClick(item) {
      if (item.businessAttachmentParam.length) window.open(item.businessAttachmentParam[0].fileUrl);
      else this.$message.warning('暂未上传图片');
    },
    GetApprove(data) {
      projectInfoApi.advertisingproclistid(data).then(res => {
        this.m_Approve.rows = res.rows;
        if (res.businessAttachmentWork.length) {
          let obj = res.businessAttachmentWork[0];
          this.fileList = [{ url: obj.fileUrl, name: obj.fileTitle, key: obj.fileId }];
         
        }
         this.m_Approve.form.remark =res.explain
      });
    },

    summitAudit() {
      if (this.fileList.length) {
        this.m_Approve.form.businessAttachmentParam = { fileUrl: this.fileList[0].url, fileTitle: this.fileList[0].name, fileId: this.fileList[0].key }
      };

      let data = {
        workType: 2,
        projectKey: this.$route.query.projectKey,
        workId: this.$route.query.workId,
        remark: this.m_Approve.form.remark,
        businessAttachmentParams: this.fileList.length ? [this.m_Approve.form.businessAttachmentParam] : null,
      };
      projectInfoApi.summitAudit(data).then(res => {
        if (res.success) {
          this.$message.success(res.message);

          window.location.replace(location.href + '&processWorkId=' + this.$route.query.workId);
        } else {
          this.$message.warning(res.message)
        };
      });
    },
  },
};
</script>
<style scoped>
::v-deep .el-divider {
  margin: 24px 0px;
}
::v-deep .el-button--text {
  padding: 0px;
}
/* @import url(); 引入css类 */
</style>